<style lang="less">
    .home {
        width: 100%;
        height: auto;
        overflow: hidden;
        text-align: center;
        padding: 8px;
        display: flex;
        .left{
            flex-grow: 1;
            right: 510px;
        }
        .right{
            min-width: 500px;
            width: 500px;
            margin-left: 10px;
        }
    }
</style>
<template>
    <div class="home">
        <div class="left">
            <my-card cardtitle="今日生产" :showright="false"style="margin-top: 10px">
                <ul style="min-height: 200px">
                    <li>
                        <div style="display: flex;justify-content:space-between;text-align: left">
                            <span style="font-weight: 900;">工单编号</span>
                            <span style="font-weight: 900;">产品编号</span>
                            <span style="font-weight: 900;">产品规格</span>
                            <span style="font-weight: 900;">数量</span>
                            <span style="font-weight: 900">状态</span>
                        </div>
                    </li>
                    <li v-for="work in data" style="height: 32px;line-height: 32px">
                        <div style="display: flex;justify-content:space-between;text-align: left">
                            <span>{{ work.nub }}</span>
                            <span>{{ work.pnub }}</span>
                            <span>{{ work.norm }}</span>
                            <span>{{ work.number }}{{ work.unit }}</span>
                            <span :style="work.type | worktypestyle">{{ work.type | worktype }}</span>
                        </div>
                    </li>
                </ul>
            </my-card>
            <my-card cardtitle="设备状态" :showright="false"style="margin-top: 10px">
                <!--<div style="height: 300px"><span style="line-height: 300px;font-size: 16px">暂无消息</span></div>-->
                <div style="display: flex;">
                    <div class="dwb" style="width: 50%;border-right: 1px solid #ddd;">
                        <header class="example-header">
                            <span style="margin-left: -30px;font-size: 12px">
                                待维保
                            </span>
                        </header>
                        <ul>
                            <li>
                                <span style="text-align:left;display: inline-block;width: 24%;font-weight: 900;">设备编号</span>
                                <span style="text-align:left;display: inline-block;width: 24%;font-weight: 900;">设备名称</span>
                                <span style="text-align:left;display: inline-block;width: 24%;font-weight: 900;">维保类型</span>
                                <span style="text-align:left;display: inline-block;width: 24%;font-weight: 900;">维保时间</span>
                            </li>
                            <li v-for="item in dwb">
                                <span style="text-align:left;display: inline-block;width: 24%">{{ item.number }}</span>
                                <span style="text-align:left;display: inline-block;width: 24%">{{ item.name }}</span>
                                <span style="text-align:left;display: inline-block;width: 24%">{{ item.type }}</span>
                                <span style="text-align:left;display: inline-block;width: 24%">{{ item.time.slice(0, 10) }}</span>
                            </li>
                        </ul>
                    </div>
                    <div class="gz" style="width: 50%">
                        <header class="example-header">
                            <span style="margin-left: -30px;font-size: 12px">
                                故障
                            </span>
                        </header>
                        <ul>
                            <li>
                                <span style="text-align:left;display: inline-block;width: 32%;font-weight: 900;">设备编号</span>
                                <span style="text-align:left;display: inline-block;width: 32%;font-weight: 900;">设备名称</span>
                                <span style="text-align:left;display: inline-block;width: 32%;font-weight: 900;">设备状态</span>
                            </li>
                            <li v-for="item in gz">
                                <span style="text-align:left;display: inline-block;width: 32%">{{ item.number }}</span>
                                <span style="text-align:left;display: inline-block;width: 32%">{{ item.name }}</span>
                                <span style="text-align:left;display: inline-block;width: 32%;color: red;">{{ item.state }}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </my-card>
        </div>
        <div class="right">
            <my-card cardtitle="生产计划" :showright="false" style="margin-top: 10px">
                <!--<div style="height: 300px"><span style="line-height: 300px;font-size: 16px">暂无计划</span></div>-->
                <ul style="min-height: 200px">
                    <li>
                        <div style="display: flex;justify-content:space-between;text-align: left">
                            <span style="font-weight: 900;">工单编号</span>
                            <span style="font-weight: 900;">产品编号</span>
                            <span style="font-weight: 900;">产品规格</span>
                            <span style="font-weight: 900;">数量</span>
                            <span style="font-weight: 900">状态</span>
                        </div>
                    </li>
                    <li v-for="work in gdjh" style="height: 32px;line-height: 32px">
                        <div style="display: flex;justify-content:space-between;text-align: left">
                            <span>{{ work.nub }}</span>
                            <span>{{ work.pnub }}</span>
                            <span>{{ work.norm }}</span>
                            <span>{{ work.number }}{{ work.unit }}</span>
                            <span :style="work.type | worktypestyle">{{ work.type | worktype }}</span>
                        </div>
                    </li>
                </ul>
            </my-card>
        </div>
    </div>
</template>
<script>
    import MyCard from '../components/myCard.vue'
    import producedata from '../produce/producedata.js'
    export default {
        name: 'sy',
        data () {
            return {
                data: [],
                gdjh: [],
                dwb: [],
                gz: []
            }
        },
        filters: {
            worktype: function (value) {
                let text = '未知'
                switch (value) {
                    case '1':
                        text = '已生产';
                        break;
                    case '3':
                        text = '未生产';
                        break;
                    case '2':
                        text = '计划中';
                        break;
                }
                return text
            },
            worktypestyle: function (value) {
                let style = {
                    color: 'red'
                }
                switch (value) {
                    case '1':
                        style.color = '#ccc'
                        break;
                    case '3':
                        style.color = '#0000ff'
                        break;
                    case '2':
                        style.color = '#00ff00'
                        break;
                }
                return style
            }
        },
        methods: {
        },
        components: {
            MyCard
        },
        activated: function () {
            //this.http.test(this, {})
            //  console.log(this.name)
            //  this.$store.commit('setCurrentTagName', 'sy')
        },
        mounted: function () {
            this.http.getAllBaseMsg(this, {})
            this.http.getAllShouYe(this, {})
        }
    };
</script>
